<template>
    <div class="box1">
        <div class="searchTop">
            <i class="iconfont" @click="back">&#xe663;</i>
            <p>搜索</p>
        </div>
        <section class="sousuo">
            <input type="text" @keyup.enter="qiu()" v-model="value" placeholder="请输入商家或美食名称">
            <button @click="chaxun">查询</button>
        </section>
        <!-- <h1>{{di.latitude}}</h1> -->
           <!-- <h2 v-show="souchu.length"
               style="background-color:gray;text-indent:10px;padding:1vh 0;"
           >商家</h2> -->
        <!-- <ul>
            
            <li v-for="item,i in souchu" :key="i">
                
                  <div class="content">
           <div>
                <section>
                    <div>
                        <img alt="全国美食(市区八一路店)" class="logo-logo_3S1eSkn_0" :src="'/myE/img/'+item.image_path">
                        <div class="px">
                            <div class="pin">
                                <p>品牌</p>
                                <h2>{{item.name}}</h2>
                            </div>
                            <van-rate v-model="item.rating" allow-half void-icon="star" void-color="#eee" />
                            
                            <p>￥{{item.float_minimum_order_amount}}起送 | {{item.piecewise_agent_fee.tips}}</p>
                            
                        </div>

                    </div>

                    <div class="zhuan">
                        <p class="iconfont">&#xe637;</p>
                        <p>蜂鸟专送</p>
                        <p>{{item.distance}} | {{item.order_lead_time}}</p>
                    </div>
                </section>
                
                <div class="line"></div>
            </div>
        </div>
            </li>
        </ul> -->

     
    </div>
</template>

<script>
import {ajax_search} from '../ajax/index'

import {mapState} from 'vuex'
export default {
    name: '',
    data(){
       return {
           search:[],
           value:'',
           souchu:[]
       }
    },
    methods:{
        chaxun(){
            // console.log(this.di);
            // console.log(this.value);
            ajax_search({
                geohash:`${this.di.latitude},${this.di.longitude}`,
                keyword:`${this.value}`
            }).then(data=>{
                console.log(data);
                // this.souchu=data;
            })
        },
        qiu(){
            // console.log(this.di,this.value);
            // console.log(this.di.latitude,this.di.longitude)
             ajax_search({
                geohash:`${this.di.latitude},${this.di.longitude}`,
                keyword:`${this.value}`
            }).then(data=>{
                console.log(data);
                this.souchu=data;
            })
        },
        back(){
          this.$router.push('/')
        }
    },
    computed: mapState(['di']),
    mounted(){
       
    },
    watch:{
       
    },
    components:{
       
    }
}
</script>

<style scoped lang="less">
ul{
    margin-top: 5vh;
    margin-bottom: 8vh;
}
// .box1 >>> .van-rate__icon--full{
//     color: orange;
// }
.searchTop{
    position: fixed;
    top: 0;
    width: 96vw;
    padding: 1.8vh 2vw;
    text-align: center;
    background-image: linear-gradient(to right top,rgb(67, 67, 150),#e7700f,blue);
    /* background-color: #3190e8; */
    color: white;
    z-index: 10000;
}
.searchTop>i{
    position: absolute;
    top: 1.8vh;
    left: 2vw;
}
.searchTop>p{
    font-size: 20px;
}
.sousuo{
    margin-top: 6.9vh;
    display: flex;
    width: 94vw;
    padding: 1.8vh 3vw;
    
    background-color: white;
}
section>input{
    color: red !important;
    /* text-indent: 10px; */
    padding-left: 15px;
}
section input{
    width: 75vw;
    height: 5vh;
    outline: none;
    border: none;
    border: 1px solid gray;
     border:1px solid rgba(153, 0, 255, 0.24);
    border-right: none;
     border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}

section button{
    outline: none;
    border: none;
    width: 20vw;
    background-image: linear-gradient(to right,yellow,orange);
    /* background-color: orange; */
    border:1px solid rgba(153, 0, 255, 0.24);
    border-left: none;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}
.goods-card {
    margin: 0;
    background-color: white;
}

.delete-button {
    height: 100%;
  }
.content section{
     display: flex;
    width: 94vw;
    padding: 1.8vh 3vw;
    
    background-color: white;
    // :hover{
    //     background-color: rgb(216, 204, 204);
    // }
  }
 
  
  .content section:nth-of-type(1) {
    display: flex;
    justify-content: space-between;
    margin-top: 0vh;
}

.content section:nth-of-type(1)>div:nth-of-type(1) {
    width: 50vw;
    display: flex;
    justify-content: space-between;
}

.content section:nth-of-type(1)>div:nth-of-type(1) img {
    width: 18vw;
    height: 18vw;
}

.content .zhuan {
    width: 38vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
    height: 10vh;
    align-content: space-between;
}

.zhuan>p {

    font-size: 12px;
    color: rgb(131, 130, 130);
}

.zhuan>p:nth-of-type(1) {
    width: 25vw;
    text-align: end;
}

.zhuan>p:nth-of-type(2) {
    color: white;
    padding: 1px 3px;
    background-color: rgb(95, 95, 218);
}

.pin {
    display: flex;
    margin-bottom: 4px;
}

.pin>p {
    font-size: 10px;
    width: 28px;
    height: 15px;
    line-height: 15px;
    background-color: yellow;
    text-align: center;
    margin-right: 5px;
    margin-top: 1px;
}

.pin h2 {
    font-size: 14px;
}

.px{
    margin-left: 2.5vw;
}

.px>p {
    font-size: 12px;
    color: #666;
    font-family: 'Helvetica Neue', Tahoma, Arial, PingFangSC-Regular, 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
    padding: 3px 0;
}

.hj {
    /* width: 15vw; */
    padding: 0;
    margin: 0;
    font-style: normal;
    font-size: 12px;
    text-align: center;
    background-color: aliceblue;
    box-shadow: 1px 1px 1px gray;
}

.zi {
    margin-top: 3vh;
    margin-left: 20vw;
    display: flex;
    margin-bottom: 3vh;
    justify-content: space-between;
}

.zi p {
    font-size: 10px;
    color: gray;
    padding: 3px 0;
    cursor: pointer;
}

.zi>div:nth-of-type(1)>p:nth-of-type(1) {
    width: 58vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zi>div>p span {
    color: white;
    border-radius: 2px;
    padding: 0 2px;
    margin-right: 4px;
}

.zi>div>p:nth-of-type(1) span {
    background-color: red;
}

.zi>div>p:nth-of-type(2) span {
    background-color: green;
}

.heng {
    display: flex;
}

.heng .sj {
    margin: 0;
    margin-top: 6px;
    margin-left: 3px;
}

.line {
    width: 92vw;
    margin-left: -4vw;
    padding: 0 4vw;
    border-bottom: 1px solid rgb(201, 200, 200);
}
</style>